:host {
  display: inline-block;
  width: 200px;
  position: relative;
}

.wrapper {
  --border-color: var(--bl-color-neutral-lighter);
  --icon-color: var(--bl-color-neutral-light);
  --text-color: var(--bl-color-neutral-darker);
  --height: var(--bl-size-2xl);
  --input-font: var(--bl-font-body-text-2);
  --line-height: var(--bl-font-body-text-2-line-height);
  --icon-size: var(--line-height);
  --icon-gap: var(--bl-size-4xs);
  --padding-vertical: calc((var(--height) - var(--line-height)) / 2);
  --padding-horizontal: var(--bl-size-xs);
  --autofill-bg-color: var(--bl-color-primary-contrast);
  --label-padding: var(--bl-size-2xs);
  --background-color: var(--bl-color-neutral-full);

  display: grid;
  position: relative;
  gap: var(--bl-size-3xs);
}

.wrapper:focus-within {
  --border-color: var(--bl-color-primary);
  --icon-color: var(--bl-color-primary);
}

.wrapper.dirty.invalid {
  --border-color: var(--bl-color-danger);
  --icon-color: var(--bl-color-danger);
}

:host([size="large"]) .wrapper {
  --height: var(--bl-size-3xl);
  --padding-vertical: var(--bl-size-xs);
  --padding-horizontal: var(--bl-size-m);
}

:host([size="small"]) .wrapper {
  --height: var(--bl-size-xl);
  --input-font: var(--bl-font-body-text-3);
  --padding-vertical: var(--bl-size-3xs);
}

.input-wrapper {
  --border-size: 1px;

  outline: none;
  display: flex;
  box-sizing: border-box;
  gap: var(--padding-vertical);
  height: var(--height);
  border: solid var(--border-size) var(--border-color);
  padding-block: 0;
  padding-inline: calc(
      var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) -
        var(--border-size)
    )
    calc(
      var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) -
        var(--border-size)
    );
  background-color: var(--background-color);
  border-radius: var(--bl-size-3xs);
  margin: 0;
  width: 0;
  min-width: 100%;
}

:host([disabled]) .wrapper {
  cursor: not-allowed;

  --background-color: var(--bl-color-neutral-lightest);
  --text-color: var(--bl-color-neutral-light);
}

.wrapper:has(input:autofill) {
  --background-color: var(--autofill-bg-color);
}

.wrapper:has(input:-webkit-autofill) {
  --background-color: var(--autofill-bg-color);
}

.input-wrapper legend,
label {
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

label {
  position: absolute;
  max-width: max-content;
  transition: all ease-in 0.1s;
  font: var(--input-font);
  top: var(--padding-vertical);
  inset-inline-start: var(--bl-input-padding-start, var(--padding-horizontal));
  inset-inline-end: var(--bl-input-padding-end, var(--padding-horizontal));
  pointer-events: none;
  color: var(--bl-color-neutral-light);
}

.has-icon label {
  inset-inline-end: calc(
    var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) +
      var(--padding-vertical)
  );
}

.input-wrapper legend {
  height: 0;
  visibility: hidden;
  display: none;
}

.input-wrapper legend span {
  padding: 0 var(--label-padding);
  display: inline-block;
  opacity: 0;
  visibility: visible;
}

input {
  width: 100%;
  align-self: stretch;
  outline: 0;
  border: 0;
  padding-block: 0;
  padding-inline: var(--label-padding) 0;
  font: var(--input-font);
  color: var(--text-color);
  -webkit-text-fill-color: var(--text-color);
  background-color: transparent;
  cursor: var(--bl-input-cursor, unset);
}

input::-webkit-credentials-auto-fill-button {
  color: red;
}

:where(.wrapper:focus-within, .wrapper.has-value) input {
  padding-inline-start: var(--label-padding);
}

input:disabled {
  cursor: not-allowed;
}

input::-webkit-calendar-picker-indicator {
  display: none;
}

input::-webkit-search-cancel-button {
  display: none;
}

input::-moz-calendar-picker-indicator {
  display: none;
}

input:autofill {
  background-color: var(--autofill-bg-color);

  /**
   * Some browsers doesn't allow setting background-color
   * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
   */
  box-shadow: 0 0 0 40rem var(--autofill-bg-color) inset;
}

input:-webkit-autofill {
  background-color: var(--autofill-bg-color);

  /**
   * Some browsers doesn't allow setting background-color
   * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
   */
  box-shadow: 0 0 0 40rem var(--autofill-bg-color) inset;
}

.icon {
  display: flex;
  align-items: center;
  gap: var(--icon-gap);
  flex-basis: var(--icon-size);
  align-self: center;
  height: var(--icon-size);
  margin-inline-end: var(--label-padding);
}

.icon:has(.clear-icon) {
  gap: var(--bl-size-3xs);
}

bl-icon:not(.reveal-icon, .clear-icon),
::slotted(bl-icon) {
  font-size: var(--icon-size);
  color: var(--icon-color);
  height: var(--icon-size);
}

.reveal-button bl-icon {
  display: none;
}

bl-icon[name="eye_on"] {
  display: inline-block;
}

.password-visible bl-icon[name="eye_on"] {
  display: none;
}

.password-visible bl-icon[name="eye_off"] {
  display: inline-block;
}

.wrapper:not(.has-icon) .icon {
  display: none;
}

.hint {
  display: none;
  font: var(--bl-font-body-text-3);
}

.hint p {
  padding: 0;
  margin: 0;
}

::placeholder {
  color: var(--bl-color-neutral-light);
  -webkit-text-fill-color: var(--bl-color-neutral-light);
}

:host([label]) ::placeholder {
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: color ease-out 0.4s;
}

:host([label-fixed]) ::placeholder,
:host :focus-within ::placeholder {
  color: var(--bl-color-neutral-light);
  -webkit-text-fill-color: var(--bl-color-neutral-light);
}

:host([label-fixed]) label {
  position: static;
  transition: none;
  transform: none;
  pointer-events: initial;
  font: var(--bl-font-caption);
  color: var(--bl-color-neutral-dark);
  padding: 0;
}

:host([label-fixed]) legend {
  display: none;
}

:host(:not([label-fixed])) :focus-within label,
:host(:not([label-fixed])) .has-value label {
  top: 0;
  inset-inline-start: calc(
    var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding)
  );
  inset-inline-end: calc(
    var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding)
  );
  transform: translateY(-50%);
  font: var(--bl-font-caption);
  color: var(--bl-color-neutral-dark);
  padding: 0 var(--label-padding);
  pointer-events: initial;
  z-index: var(--bl-index-base);
}

:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend {
  max-width: 100%;
  font: var(--bl-font-caption);
  display: block;
}

.error-icon,
.invalid-text {
  display: none;
}

.dirty.invalid label,
.invalid-text,
.error-icon {
  color: var(--bl-color-danger);
}

.help-text {
  color: var(--bl-color-neutral-dark);
}

:host([help-text]) .hint,
.dirty.invalid .hint {
  display: block;
}

.dirty.invalid .invalid-text {
  display: block;
}

.dirty.invalid .help-text {
  display: none;
}

.dirty.invalid .error-icon {
  display: inline-block;
}

.split-divider {
  display: block;
  height: 1rem;
  width: 1px;
  background-color: var(--bl-color-neutral-lighter);
}

slot[name="icon"] bl-icon {
  margin-inline-start: var(--bl-size-3xs);
  font-size: var(--bl-font-size-m);
}
